﻿<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>Document</title>
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
        color: #666;
    }

    #box {
        width: 1200px;
        height: auto;
        margin: 50px auto;
    }

    .header {
        height: 80px;
        background: #f9f9f9;
        border-radius: 10px 10px 0 0;
    }

    #progress {
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 80px;
        font-size: 32px;
    }

    .body {
        height: auto;
    }

    #upload {
        height: 200px;
        background: #f1f1f1;
        text-align: center;
        line-height: 200px;
        font-size: 24px;
    }

    #preview {
        min-height: auto;
        border: 1px solid #ccc;
        padding: 15px;
        border-radius: 0 0 10px 10px;
    }

    #list {
        min-height:350px;
		display:flex;
		flex-wrap:wrap;
    }

    #list li {
        width: 22%;
        height: 300px;
        list-style: none;
		box-shadow:5px 5px 10px #ccc;
		padding:15px;
    }

    #list img {
        width: 100%;
        height: 100%;
    }
    </style>
</head>

<body>
    <div id="box">
        <div class="header">
            <div id="progress">上传进度</div>
        </div>
        <div class="body">
            <div id="upload">拖拽文件到此区域</div>
            <div id="preview">
                <ul id="list"></ul>
            </div>
        </div>
    </div>
    <script>
    var oUpload = document.getElementById('upload');
    var oUl = document.getElementById('list');
    oUpload.addEventListener('dragenter', drag, false);
    oUpload.addEventListener('dragover', drag, false);
    oUpload.addEventListener('drop', drag, false);
    oUpload.addEventListener('dragleave', drag, false);

    function drag(e) {
        e.preventDefault();
        switch (e.type) {
            case 'dragenter':
            	this.innerHTML = "请释放鼠标";
                break;
            case 'dragover':
            	this.innerHTML = "准备上传文件";
                break;
            case 'drop':
				var data = e.dataTransfer.files;
				Array.prototype.forEach.call(data, function(current){
					var reader = new FileReader();
					reader.readAsDataURL(current);
					reader.addEventListener('load', function() {
						var oLi = document.createElement('li');
						oLi.innerHTML = "<img src='"+this.result+"'/>";
						oUl.appendChild(oLi);
					})
				})
                break;
            case 'dragleave':
            	this.innerHTML = "拖拽文件到此区域";
                break;
        }
    }
    </script>
</body>

</html>